﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>行政区划 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 行政区划" />
    <meta name="description" content="Script Services 五级行政区划" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="五级行政区划">
                                    <svg class="titleicon"><use xlink:href="#zoning"></use></svg> &#x884C;&#x653F;&#x533A;&#x5212;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <h5>git</h5>
    <div>
        ● <a class="mr-4" href="https://github.com/netnr/zoning">https://github.com/netnr/zoning</a>
        ● <a href="https://gitee.com/netnr/zoning">https://gitee.com/netnr/zoning</a>
    </div>
    <h5 class="mt-4">npm</h5>
    <div>
        ● <a class="mr-4" href="https://unpkg.com/zoningjs/">https://unpkg.com/zoningjs/</a>
        ● <a class="mr-4" href="https://cdn.jsdelivr.net/npm/zoningjs/">https://cdn.jsdelivr.net/npm/zoningjs/</a>
        ● <a href="https://cdn.jsdelivr.net/npm/zoningjs@2.0.20/0.json">https://cdn.jsdelivr.net/npm/zoningjs@2.0.20/0.json</a>
    </div>
    <h5 class="mt-4">四级联动（省级、地级、县级、乡级）</h5>
    <div>
        ● <a href="https://cdn.jsdelivr.net/npm/zoningjs@2.0.20/zoning-4.json">https://cdn.jsdelivr.net/npm/zoningjs@2.0.20/zoning-4.json</a>
    </div>
    <div class="row" id="zoning4">
        <div class="col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
    </div>
    <h5 class="mt-4">五级联动（省级、地级、县级、乡级和村级）</h5>
    <div class="row" id="zoning5">
        <div class="col-xl col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-xl col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-xl col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-xl col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
        <div class="col-xl col-md-3 col-sm-6 mt-2">
            <select class="custom-select"></select>
        </div>
    </div>
    <p class="psecode mt-2" id="zoningcode5"></p>
</div>

<script>
    //var npmsrc = "https://unpkg.com/zoningjs@2.0.20/";
    //国内镜像
    var npmsrc = "https://cdn.jsdelivr.net/npm/zoningjs@2.0.20/";

    var zoning4 = {
        json: {},
        load: function (callback) {
            $.getJSON(npmsrc + "zoning-4.json", null, function (data) {
                zoning4.json = data;
                callback();
            });
        },
        change: function (ses, index) {
            var se1 = ses[index++];
            if (index < ses.length) {
                var se2 = ses[index], sd = zoning4.json[se1.value];
                se2.options.length = 0;
                se2.options.add(new Option("（请选择）", ""));
                if (se1.value != "" && sd) {
                    for (var i = 0; i < sd.length; i++) {
                        var sdi = sd[i];
                        se2.options.add(new Option(sdi.text, sdi.id));
                    }
                }
                if (index + 1 < ses.length) {
                    zoning4.change(ses, index);
                }
            }
        },
        getvalues: function (ses) {
            var codes = [];
            ses.each(function () {
                codes.push(this.value || "-");
            });
            return codes;
        },
        init: function (ses) {
            ses.each(function (index) {
                $(this).attr('data-index', index);
                this.options.add(new Option("（请选择）", ""));
                if (!index) {
                    var idb = zoning4.json["0"];
                    for (var i = 0; i < idb.length; i++) {
                        var sdi = idb[i];
                        this.options.add(new Option(sdi.text, sdi.id));
                    }
                }
            }).change(function () {
                zoning4.change(ses, $(this).attr('data-index'));

                $('#zoningcode4').html(zoning4.getvalues(ses).join('</br>'));
            })
        }
    }
    zoning4.load(function () {
        zoning4.init($('#zoning4').find('select'))
    });

    var zoning5 = {
        list: function (pid, callback) {
            var pidaspath = pid > 0 ? (pid.substring(0, 2) + "/" + pid) : 0;
            $.getJSON(npmsrc + pidaspath + ".json", null, callback)
        },
        change: function (ses, index) {
            var se1 = ses[index++];
            if (index < ses.length) {
                var se2 = ses[index];
                se2.options.length = 0;
                se2.options.add(new Option("（请选择）", ""));
                if (se1.value != "") {
                    zoning5.list(se1.value, function (res) {
                        for (var i = 0; i < res.length; i++) {
                            var rei = res[i];
                            se2.options.add(new Option(rei.text, rei.id));
                        }
                    })
                }
                if (index + 1 < ses.length) {
                    zoning5.change(ses, index);
                }
            }
        },
        getvalues: function (ses) {
            var codes = [];
            ses.each(function () {
                codes.push(this.value || "-");
            });
            return codes;
        },
        init: function (ses) {
            ses.each(function (index) {
                $(this).attr('data-index', index);
                this.options.add(new Option("（请选择）", ""));
                if (!index) {
                    var that = this;
                    zoning5.list("0", function (res) {
                        for (var i = 0; i < res.length; i++) {
                            var rei = res[i];
                            that.options.add(new Option(rei.text, rei.id));
                        }
                    })
                }
            }).change(function () {
                zoning5.change(ses, $(this).attr('data-index'));

                $('#zoningcode5').html(zoning5.getvalues(ses).join(' / '));
            })
        }
    }

    zoning5.init($('#zoning5').find('select'));
</script>
        </div>
            <a href="javascript:ss.toTop();" class="totop" title="返回顶部">ˆ</a>
</body>
</html>
